<template>
    <el-config-provider :locale="currentLocale">
        <!-- 缓存组件 -->
        <!-- <router-view v-slot="{ Component }">
            <keep-alive :max="10">
                <component :is="Component"></component>
            </keep-alive>
        </router-view> -->

        <!-- <keep-alive :max="10">
            <router-view />
        </keep-alive> -->

        <KeepAlive>
            <router-view v-slot="{ Component, route }">
                <component :is="Component" />
            </router-view>
        </KeepAlive>
        <!-- <router-view /> -->
        <ReDialog />
    </el-config-provider>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { ReDialog } from "@/components/ReDialog";
import { connectWebsocket, websock } from "@/utils/webScoket";
import autofit from "autofit.js";
import { useMapStoreHook } from "@/store/modules/map";
import { useNav } from "@/layout/hooks/useNav";
import path from "@/assets/warning.mp3";
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
import { VxeUI } from 'vxe-table'

export default defineComponent({
    name: "app",
    components: {
        // 引入ElConfigProvider组件
        [ElConfigProvider.name]: ElConfigProvider,
        // 引入ReDialog组件
        ReDialog
    },
    computed: {
        // 计算属性，返回当前语言环境
        currentLocale() {
            return this.locale === "zh" ? zhCn : en;
        }
    },
    setup() {
        const { locale } = useTranslationLang();

        watch(() => locale.value, (newVal) => {
            if (newVal === 'zh') {
                VxeUI.setLanguage('zh-CN')
            } else {
                VxeUI.setLanguage('en-US')
            }
        })

        const pureMap = useMapStoreHook();
        const { webScoket } = useNav();
        const audio = new Audio(path);
        // console.log('webSocked=>', webScoket);
        let arr = new Set()
        const getDate = () => {
            // 补零
            let addZero = t => {
                return t < 10 ? "0" + t : t;
            };
            let time = new Date();
            let Y = time.getFullYear(), // 年
                M = time.getMonth() + 1, // 月
                D = time.getDate(), // 日
                h = time.getHours(), // 时
                m = time.getMinutes(), // 分
                s = time.getSeconds(); // 秒
            if (M > 12) {
                // 注: new Date()的年月日的拼接，在月份为12月时，会出现 获取月份+1 后，为13月的bug，需要特殊处理。用moment第三方插件获取时间也可避免此问题。
                M = M - 12;
            }
            return `${addZero(h)}:${addZero(m)}:${addZero(s)}`;
        };

        // scoket连接
        connectWebsocket(webScoket.value, (data: any) => {
            // 获取pureMap.scoketData的所有键
            let form = Object.keys(pureMap.scoketData);
            // 遍历data中的所有键
            for (let key in data) {
                // 如果data[key]为null，则跳过
                if (data[key] === null) continue;
                // 如果form中包含key
                if (form.indexOf(key) > -1) {
                    // 如果key为AgvData、JobData、CallData、CrossMsgData
                    if (
                        key === "AgvData" ||
                        key === "CallData" ||
                        key === "CrossMsgData"
                    ) {
                        // 更新pureMap.scoketData[key]
                        pureMap.$patch(state => {
                            state.scoketData[key] = data[key];
                        });
                    } else if (key === "JobData") {
                        // console.log(data[key]);
                        pureMap.$patch(state => {
                            state.scoketData[key] = data[key].reverse();
                        });
                    }

                    // 如果key为LogData
                    if (key === "LogData") {
                        // 更新pureMap.scoketData[key]
                        pureMap.$patch(state => {
                            // 如果state.scoketData[key]的长度大于等于30，则删除最后一个元素
                            if (state.scoketData[key].length >= 30) { state.scoketData[key].pop(); }
                            if (arr.has(data[key].content)) {
                                state.scoketData[key].forEach((item, index) => {
                                    if (item.content == data[key].content) {
                                        state.scoketData[key].splice(index, 1)
                                        state.scoketData[key].unshift(item)
                                        state.scoketData[key][index].time = getDate()
                                        // 后面再增加一个随机数，防止排序时，时间相同，排序错误
                                        state.scoketData[key][index].sum = new Date().getTime() + Math.random() * 100
                                    }
                                })
                            } else {
                                arr.add(data[key].content)
                                state.scoketData[key].unshift({
                                    ...data[key],
                                    time: getDate(),
                                    sum: new Date().getTime() + Math.random() * 100
                                });
                            }
                        });
                    }

                    // 告警报警提示音
                    if (key === "AgvData") {
                        const errorIndex = data[key].findIndex(v => {
                            return v.errorCode;
                        });
                        if (errorIndex === -1) audio.pause();
                        else audio.play();
                    }
                }
            }
        });

        return {
            locale
        }
    },

});
</script>
